<script lang="ts">
import Vue from 'vue'
import {computeFundData} from '@/api/systemTools'
import FundDiffDialog from '@/views/systemTools/fundAdjustmentAssistance/FundDiffDialog.vue'

export default Vue.extend({
  name: "index",
  components: {FundDiffDialog},
  data() {
    return {
      position: {
        jsonData: '',
        listKey: 'FundHoldList',
        fundCode: 'FundCode',
        fundName: 'FundName',
        proportion: 'Proportion'
      },
      target: {
        jsonData: '',
        listKey: 'parts',
        fundCode: 'fundCode',
        fundName: 'fundName',
        proportion: 'percent'
      },
      dialogVisible: false,
      fundData: []
    }
  },
  methods: {
    compute() {
      const reqData = {
        position: this.position,
        target: this.target
      }
      computeFundData(reqData).then(res => {
        this.fundData = res
        this.dialogVisible = true
      })
    },
    validData() {
      return this.position.jsonData && this.position.listKey && this.position.fundCode && this.position.fundName && this.position.proportion &&
        this.target.jsonData && this.target.listKey && this.target.fundCode && this.target.fundName && this.target.proportion
    }
  }
})
</script>

<template>
  <div>
    <div class="body-main">
      <div class="equal-div">
        <div>
          <span>您当前的持仓 JSON 数据：</span>
          <el-input type="textarea" v-model="position.jsonData"/>
        </div>
        <div v-if="position.jsonData">
          <div>
            <span>JSON 数据中持仓数据的 KEY：</span>
            <el-input type="text" v-model="position.listKey"/>
            <span>基金代码：</span>
            <el-input type="text" v-model="position.fundCode"/>
            <span>基金名称：</span>
            <el-input type="text" v-model="position.fundName"/>
            <span>持仓占比：</span>
            <el-input type="text" v-model="position.proportion"/>
          </div>
        </div>
      </div>
      <div style="width: 50px"></div>
      <div class="equal-div">
        <div>
          <span>目标当前的持仓 JSON 数据：</span>
          <el-input type="textarea" v-model="target.jsonData"/>
        </div>
        <div v-if="target.jsonData">
          <div>
            <span>JSON 数据中持仓数据的 KEY：</span>
            <el-input type="text" v-model="target.listKey"/>
            <span>基金代码：</span>
            <el-input type="text" v-model="target.fundCode"/>
            <span>基金名称：</span>
            <el-input type="text" v-model="target.fundName"/>
            <span>持仓占比：</span>
            <el-input type="text" v-model="target.proportion"/>
          </div>
        </div>
      </div>
    </div>
    <div v-if="validData()" class="bet-div">
      <el-button type="primary" @click="compute">开始计算</el-button>
    </div>

    <FundDiffDialog
      :visible.sync="dialogVisible"
      :data="fundData"
    />
  </div>
</template>

<style scoped lang="scss">
.body-main {
  display: flex;
  width: 100%;
  justify-content: center;
}

.equal-div {
  width: 40%;
}

.bet-div {
  display: flex;
  justify-content: center;

  margin-top: 30px;
}
</style>
